<template>
	<view class="commission">
		<!-- 现金 爆点 -->
		<view class="commission-top">
			<view class="commission-top-item">
				<view class="tit">累计现金</view>
				<view>
					<text style="font-size: 28rpx;">￥</text>
					<text class="income">92.36</text>
				</view>
			</view>
			<view class="commission-top-item">
				<view class="tit">累计爆点</view>
				<view class="income">88.36</view>
			</view>
		</view>

		<view class="select-box">
			<!-- 爆团 邀新 -->
			<view class="select-box-top" :style="'top:' + stickyTop + 'px'">
				<u-subsection :list="list" mode="button" :current="currentIndex" activeColor="#333" inactiveColor="#999"
					fontSize="28rpx" bgColor="#f8f8f8" @change="changeIndex">
				</u-subsection>
			</view>

			<!-- 遍历 -->
			<view class="select-box-item" v-for="it in 10">
				<view class="left">
					<image :src="imagesUrl('kefu.png')" mode="widthFix" class="image" />
					<view class="user-name">
						用户昵称用户昵称用户昵称用户昵称
						<view class="time">
							2050-08-05 19:58:18
						</view>
					</view>
				</view>
				<view class="get">
					+399爆点
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				imagesUrl: app.imagesUrl,
				// 吸顶
				stickyTop: 0,
				list: ['爆团佣金', '邀新佣金'],
				currentIndex: 0
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index
				console.log(this.list[this.currentIndex])
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		}
	}
</script>

<style lang="scss" scoped>
	.commission {
		width: 100vw;
		font-size: 24rpx;

		.commission-top {
			display: flex;
			padding: 30rpx;
			text-align: center;

			.commission-top-item {
				width: 50%;
				padding: 20rpx 0 0;
				background-color: #fff;

				&:first-child {
					position: relative;
					border-radius: 16rpx 0 0 16rpx;

					&::after {
						position: absolute;
						top: 30%;
						right: 0;
						content: '';
						width: 1rpx;
						height: 64rpx;
						background-color: #D8D8D8;
					}
				}

				&:last-child {
					border-radius: 0 16rpx 16rpx 0;
				}

				.tit {
					color: #999;
				}

				.income {
					font-family: D-DIN;
					color: #333;
					font-size: 48rpx;
					font-weight: bold;
					// line-height: 48rpx;
					line-height: 100rpx;
				}
			}
		}

		.select-box {
			background-color: #fff;

			.select-box-top {
				position: sticky;
				// top: 88rpx;

				// 在微信小程序 top值为0
				// #ifdef MP-WEIXIN 
				top: 0;
				// #endif

				width: 100vw;
				background: #fff;
				z-index: 999;

				padding: 28rpx;
			}

			.select-box-item {
				display: flex;
				justify-content: space-between;
				padding: 34rpx 30rpx;

				.left {
					display: flex;

					.image {
						width: 64rpx;
						height: 64rpx;
					}

					.user-name {
						width: 240rpx;
						margin-left: 24rpx;
						font-size: 26rpx;
						color: #333;

						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.get {
					font-size: 28rpx;
					margin-top: 12rpx;
				}

				&:last-child {
					// 小程序 底部
					// 兼容 IOS 11.2 以下
					// padding-bottom: constant(safe-area-inset-bottom);
					// 兼容 IOS 11.2 以上
					// padding-bottom: env(safe-area-inset-bottom);

					// 预设一个高度
					padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
					padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

				}
			}
		}
	}
</style>